<template>
  <div id="scene">
        <div id="contents">

            <div  class="bee_legs">
                <div id="front_leg" class="legs"></div>
                <div id="back_leg" class="legs"></div>
            </div> <!-- END OF LEGS -->

            <div id="the_wings">
                <div id="wing_one" class="wings"></div>
                <div id="wing_two" class="wings"></div>
                <div id="wing_highlight">
                    <div id="highlight_curve"></div>
                </div>
            </div>
            <div id="tail"></div>


            <div id="bee_body">
                <div id="body_shine"></div>
                <div id="eye"></div>
                <div id="the_stripes">

                    <div id="stripe_one" class="stripes">
                        <div class="stripe_shines"></div>
                    </div>
                    <div id="stripe_two" class="stripes">
                        <div class="stripe_shines"></div>
                    </div>
                    <div id="stripe_three">
                        <div class="stripe_shines"></div>
                    </div>
                </div>
                <div id="body_highlight"></div>

            </div>

        </div>

        <!-- <div id="shadow"></div> -->
        
    </div> 
 
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>body{
  background-color: #9b216c;
}
a{
  color:#6e094d;
  position:absolute;
  margin-top:50rem;
  margin-left:22rem;
  text-align:center;
}
/* #scene{
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
} */
.wings{
  background-color: #f498bf;
  height:90rem;
  width:90rem;
  position:absolute;
  margin-top: -90rem;
}
#wing_highlight{
  background-color: #f9cee1;
  position:absolute;
  height:50rem;
  width:50rem;
  border-radius:90rem;
  margin-top:-75rem;
  margin-left:30rem;
}
#highlight_curve{
  background-color:  #f498bf;
  position:absolute;
  height:45rem;
  width:40rem;
  border-radius:90rem;
  margin-left:10rem;
  margin-top:10rem;
  
}
#wing_one{
  border-radius: 50rem 50rem 1rem 50rem;
  margin-left:17rem;
}
#wing_two{
  border-radius: 50rem 50rem 50rem 1rem;
  margin-left: 100rem;
}
#eye{
  background-color:black;
  height: 15rem;
  width:15rem;
  position:absolute;
  margin-left:30rem;
  margin-top: 50rem;
  border-radius: 100rem;  
}
.stripes{
  background-color: black;
  height: 130rem;
  width:35rem;
  position:absolute;
}
#stripe_one{
  margin-left:70rem;
  border-top: 95rem solid #0e3441;
}
#stripe_two{
  margin-left:125rem;
   border-top: 95rem solid #0e3441;
}
#stripe_three{
  border-top: 90rem solid #0e3441;
  margin-left:180rem;
  height: 140rem;
  width: 40rem;
  margin-top: 5rem;
  background-color: black;
  position:absolute;
  
}
#body_highlight{
  height:30rem;
  width: 130rem;
  background-color: #86999f;
  position:absolute;
  margin-left: 60rem;
  margin-top:20rem;
  border-radius: 90rem;
  mix-blend-mode: lighten;
}
#body_shine{
  position:absolute;
  height:130rem;
  width: 250rem;
  border-radius: 90rem;
  margin-left:1rem;
  margin-top:-36rem;
  background-color:#fec93f;
  mix-blend-mode: burn;
}

#bee_body{
  background-color: #f89d28;
  height:130rem;
  width: 220rem;
  border-radius: 90rem;
  position:relative;
  overflow:hidden; 
}
#shadow{
  height:25rem;
  width:120rem;
  background-color: #6e094d;
  margin-left:50rem;
  margin-top: 75rem;
  border-radius:90rem;
  position:absolute;
}
#tail{
  height:10rem;
  width:50rem;
  border-radius: 40rem;
  background-color: black;
  position:absolute;
  margin-left:200rem;
  margin-top:55rem;
}
.legs{
  border-radius:90rem;
  margin-top:120rem;
  height:45rem;
  width:20rem;
  background-color:black;
  position:absolute;
}
#front_leg{
  margin-left:30rem;
  margin-left:85rem;
}
#back_leg{
  margin-left:140rem;
}

#contents {
  position:relative;
  -webkit-animation: fly .7s infinite alternate;
          animation: fly .7s infinite alternate;
}
@-webkit-keyframes fly {
  0% { top: -5rem;  }
  100% { top: 4rem; }
}
@keyframes fly {
  0% { top: -5rem;  }
  100% { top: 4rem; }
}
#the_wings{
  -webkit-animation: flap .1s infinite alternate;
          animation: flap .1s infinite alternate;
}
@-webkit-keyframes flap {
  0% { -webkit-transform: rotatex(10deg); transform: rotatex(10deg); }
  100% {-webkit-transform: rotatex(80deg);transform: rotatex(80deg);}
}
@keyframes flap {
  0% { -webkit-transform: rotatex(10deg); transform: rotatex(10deg); }
  100% {-webkit-transform: rotatex(80deg);transform: rotatex(80deg);}
}
.legs{
  -webkit-animation: leg_swing .7s infinite alternate;
          animation: leg_swing .7s infinite alternate;
}
@-webkit-keyframes leg_swing {
  0% { -webkit-transform: skew(10deg); transform: skew(10deg); }
  100% {-webkit-transform: skew(1deg);transform: skew(1deg);}
}
@keyframes leg_swing {
  0% { -webkit-transform: skew(10deg); transform: skew(10deg); }
  100% {-webkit-transform: skew(1deg);transform: skew(1deg);}
}
</style>
